<script setup lang="ts">
import {getCollectList} from "@/api/home/index";
import {reactive,ref} from "vue";
import router from "@/router";
const url = 'http://192.168.5.120:8090';
const data = reactive({
    pageNum: 1,
    pageSize: 10,
})
const tableData= ref([])
getCollectList(data).then(res => {
    console.log(res)
    tableData.value=res.rows
})
const jump = (id)=>{
    router.push({path:'/articleDetail',query:{id:id}})
}
</script>

<template>
    <div class="box">
        <div class="head">
            <router-link to="/personal">
                <van-icon name="arrow-left" size=4vw style="margin-top: 2%;margin-left: 2%"/>
            </router-link>
            <label>我的收藏</label>
        </div>
<!--        <router-link to="/articleDetail">-->
        <div class="foot">

            <div class="content" v-for="item in tableData" :key="item" @click="jump(item.articleId)">
                <div class="leftcontent">
                    <p style="font-size: 4vw;font-weight: 600;margin-top: 1%">{{item.title}}</p>
                    <div class="contentFoot">
                        <span>{{item.readers}}人阅读</span>
                        <span style="float: right">{{ item.sendTime }}</span>
                    </div>
                </div>
                <div class="rightcontent"><img :src="url+item.titlePicture" alt=""></div>
            </div>
        </div>
<!--        </router-link>-->
    </div>
</template>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

.box {
    width: 100%;
    min-height: 100vh;
    background-color: #f8f8f8;
//height: 100vh;

    .head {
        width: 100%;
        height: 7vh;
        background-color: white;
        margin-bottom: 4%;

        label {
            margin-left: 2%;
            font-size: 80%;
            font-weight: 700;
        }
    }

    .foot {
        .content {
            display: flex;
            margin: auto;
            margin-bottom: 2%;
            width: 97%;
            background-color: white;
            border: 1px solid white;
            border-radius: 5px;

            .leftcontent {
                width: 70%;
                height: 13vh;

                .contentFoot {
                    margin-top: 15%;
                    color: #cccccc;
                    font-size: 3vw;
                }
            }

            > div {
                padding: 2%;
            }

            .rightcontent {
                width: 30%;
                height: 13vh;

                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
}
</style>